/**
 * Created by wuyunan on 2017/5/19.
 */
import React from "react";

import PropTypes from "prop-types";
import {
  StyleSheet, Text, TouchableOpacity, View, ImageBackground,
} from "react-native";
import HolderImage from "../common/HolderImage";
import {
  Color, FontSize, ScreenWidth, scale,
} from "../../common/index";

const HotPhoneItem = props => {
  const {
    onPress, disabled, title, source, price, desc, label,
  } = props;

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={onPress} disabled={disabled} style={styles.touchConatiner}>
        <View style={styles.contentConatiner}>
          <HolderImage source={source} style={styles.image} resizeMode="cover" />
          <View style={styles.textConatiner}>
            <Text style={styles.text_title}>{title}</Text>
            <Text style={styles.text_desc}>{desc}</Text>
            <Text style={styles.text_price}>￥{price}</Text>
          </View>
        </View>
      </TouchableOpacity>
      <ImageBackground style={styles.lable} source={require("../../img/ic_lable_bg.png")}>
        <Text style={styles.textLable}>{label}</Text>
      </ImageBackground>
    </View>
  );
};
HotPhoneItem.defaultProps = {
  label: "热门",
  color: Color.white,
  fontSize: FontSize.SIZE_16,
  disabled: false,
  onPress: () => {},
};
HotPhoneItem.propsTypes = {
  title: PropTypes.string,
  label: PropTypes.string,
  desc: PropTypes.string,
  price: PropTypes.string,
  onPress: PropTypes.func,
  disabled: PropTypes.bool,
};

const styles = StyleSheet.create({
  container: {
    width: ScreenWidth / 2 - scale * 8,
    height: scale * 102,
    alignItems: "center",
    marginTop: scale * 8,
  },
  touchConatiner: {
    width: ScreenWidth / 2 - scale * 24,
    height: scale * 92,
    backgroundColor: Color.white,
    borderRadius: scale * 5,
    marginTop: 5,
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
  },
  contentConatiner: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  text: {
    color: Color.white,
    fontSize: FontSize.SIZE_16,
    backgroundColor: Color.transparent,
  },
  image: {
    alignItems: "center",
    justifyContent: "center",
    height: scale * 70,
    width: (ScreenWidth / 2 - scale * 8) / 3,
  },
  text_title: {
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
  },
  text_desc: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_12,
    marginTop: scale * 4,
  },
  text_price: {
    color: Color.text_price,
    fontSize: FontSize.SIZE_16,
    marginTop: scale * 4,
  },
  lable: {
    width: scale * 30,
    height: scale * 25,
    position: "absolute",
    right: scale * 8,
    elevation: 3,
    alignItems: "center",
    justifyContent: "center",
  },
  textLable: {
    color: Color.white,
    fontSize: FontSize.SIZE_10,
    fontWeight: "bold",
  },
});
export default HotPhoneItem;
